{% extends "base.html" %}
{% block title %}推荐{% endblock %}

{% block card %}
    <div class="layui-card-header"><h2>推荐图书</h2></div>{% endblock %}
{% block body %}
    <style type="text/css">
        .div1 {
            width: 300px;
            height: 315px;
            position: absolute;
            top: 18px;
            left: 30px;
        }

        .div2 {
            width: 300px;
            height: 315px;
            position: absolute;
            top: 18px;
            left: 730px;
        }

        .div3 {
            width: 300px;
            height: 315px;
            position: absolute;
            top: 410px;
            left: 30px;
        }

        .div4 {
            width: 300px;
            height: 315px;
            position: absolute;
            top: 410px;
            left: 730px;
        }

        .div11 {
            width: 300px;
            height: 315px;
            position: absolute;
            text-align-all: right;
            top: 58px;
            left: 315px;
        }

        .div21 {
            width: 300px;
            height: 315px;
            position: absolute;
            text-align-all: right;
            top: 58px;
            left: 1010px;
        }

        .div31 {
            width: 300px;
            height: 315px;
            position: absolute;
            text-align-all: right;
            top: 450px;
            left: 315px;
        }

        .div41 {
            width: 300px;
            height: 315px;
            position: absolute;
            text-align: right;
            top: 450px;
            left: 1010px;
        }
        .a{
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <div class="div1">
        <img src="https://5b0988e595225.cdn.sohucs.com/images/20190522/56c0f898c4c243699aa01dba5ea8d455.jpeg"
             width="250" height="315">
    </div>
    <div class="div11">
        <p align="left" style="margin:45px"><a class="a">书名：</a><a class="a">{{ bookname }}</a></p>
        <p align="left" style="margin:45px">作者：{{ author }}</p>
        <p align="left" style="margin:45px">id:{{ press }}</p>

    </div>
    <div class="div2">
        <img src="https://5b0988e595225.cdn.sohucs.com/images/20190522/56c0f898c4c243699aa01dba5ea8d455.jpeg"
             width="250" height="315">
    </div>
    <div class="div21">
        <p align="left" style="margin:45px"><a class="a">书名：</a><a class="a">{{ bookname2 }}</a></p>
        <p align="left" style="margin:45px">作者：{{ author2 }}</p>
        <p align="left" style="margin:45px">id:{{ press2 }}</p>

    </div>
    <div class="div3">
        <img src="https://5b0988e595225.cdn.sohucs.com/images/20190522/56c0f898c4c243699aa01dba5ea8d455.jpeg"
             width="250" height="315">
    </div>
    <div class="div31">
        <p align="left" style="margin:45px"><a class="a">书名：</a><a class="a">{{ bookname3 }}</a></p>
        <p align="left" style="margin:45px">作者：{{ author3 }}</p>
        <p align="left" style="margin:45px">id:{{ press3 }}</p>

    </div>
    <div class="div4">
        <img src="https://5b0988e595225.cdn.sohucs.com/images/20190522/56c0f898c4c243699aa01dba5ea8d455.jpeg"
             width="250" height="315">
    </div>
    <div class="div41">
        <p align="left" style="margin:45px"><a class="a">书名：</a><a class="a">{{ bookname4 }}</a></p>
        <p align="left" style="margin:45px">作者：{{ author4 }}</p>
        <p align="left" style="margin:45px">id:{{ press4 }}</p>
    </div>




{% endblock %}

